<!--
 * @Author: hu_binbin
 * @Date: 2021-08-04 14:47:50
 * @LastEditTime: 2021-08-05 20:58:26
 * @Description: 饼状图
-->
<template>
    <div class="circleEchars">
        <div id="myChart"></div>
        <div class="content">
            <div class="cont-item">
                <span class="cricle bg-green"></span>
                <span>一般隐患：<font class="color-green">13</font>个</span>
            </div>
            <div class="cont-item">
                <span class="cricle bg-orange"></span>
                <span>严重隐患：<font class="color-orange">13</font>个</span>
            </div>
            <div class="cont-item">
                <span class="cricle bg-red"></span>
                <span>危急隐患：<font class="color-red">13</font>个</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'circleEcharsHidden',
    props:{
        data: {
            type: Array,
            default: []
        }
    },
    data () {
        return {
            msg: ''
        }
    },
    mounted(){
        this.drawLine();
    },
    watch: {
        data() {
            this.drawLine();
        }  
    },
    methods: {
        drawLine(){
            var chartDom = document.getElementById('myChart');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '隐患',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ["50%","50%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        tooltip:{
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)",
                            position: function(point,brower,dom,rect,size){
                                return [brower[0]-220,'10%']
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '16',
                                fontWeight: 'bold'
                            }
                        },
                        color:["#19C169","#FA5151","#FFAA00"],
                        // labelLine: {
                        //     show: true
                        // },
                        // label: {
                        //     normal:{
                        //         show:true,
                        //         formatter:'{d}%'
                        //     },
                        // },
                        data: this.data
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
}
</script>
<style>
    #myChart{
        width: 200px;
        height: 200px;
    }
    .cricle{
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
    .bg-orange{
        background: #FFAA00;
    }
    .bg-red{
        background: #FA5151;
    }
    .bg-green{
        background:#19C169;
    }
    .color-orange{
        color: #FFAA00;
    }
    .color-red{
        color: #FA5151;
    }
    .color-green{
        color:#19C169;
    }
    .circleEchars{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .content{
        color:#999999;
        font-size: 0.5rem;
    }
    .cont-item{
        margin-top: 15px;
    }
</style>